import { useEffect, useState } from "react"
import axios from "axios"
import { Button, Input, message, Select } from "antd"
import md5 from "md5"
import "./index.css"
// 支持语言返回的数据类型
interface LangInterface {
  code: string
  label: string
}
const Index = () => {
  const { TextArea } = Input
  const [chVal, setChVal] = useState<string>("")
  const [tranVal, setTranVal] = useState<string>("")
  // 想要翻译的语言
  const [trLang, setTrLang] = useState<string>("ar")
  useEffect(() => {
    if (chVal) {
      handelTranslate()
    }
  }, [trLang])
  // 翻译
  const handelTranslate = () => {
    const salt = Date.now()
    // 签名
    const sign = md5(
      "13f70938d0625f94" + chVal + salt + "IQlqbSrwv2tX4Kl9mnCvde2xpRy9R9uf"
    )
    axios
      .get("/youdao-api/api", {
        params: {
          q: chVal,
          from: "auto",
          to: trLang,
          appKey: "13f70938d0625f94",
          salt,
          sign,
        },
      })
      .then(res => {
        if (res.status === 200) {
          setTranVal(res.data.translation[0])
        }
      })
  }
  // 支持翻译的语言
  const translateLang = (): LangInterface[] => {
    return [
      {
        code: "ar",
        label: "阿拉伯语",
      },
      {
        code: "de",
        label: "德语",
      },
      {
        code: "en",
        label: "英语",
      },
      {
        code: "es",
        label: "西班牙语",
      },
      {
        code: "fr",
        label: "法语",
      },
      {
        code: "hi",
        label: "印地语",
      },
      {
        code: "id",
        label: "印度尼西亚语",
      },
      {
        code: "it",
        label: "意大利语",
      },
      {
        code: "ja",
        label: "日语",
      },
      {
        code: "ko",
        label: "韩语",
      },
    ]
  }
  // 清空表单按钮
  const handelClearForm = () => {
    setChVal("")
    setTranVal("")
  }
  // 选择翻译语言
  const handelChangTran = (val: string) => {
    setTrLang(val)
    if (chVal) {
      handelTranslate()
    }
  }
  // 复制按钮
  const handelCopyVal = () => {
    navigator.clipboard.writeText(chVal)
    message.success("复制成功")
  }
  return (
    <div className="pos-container">
      <div className="pos-trans">
        <h2>文本翻译</h2>
        <Select
          defaultValue="ar"
          style={{ width: 120 }}
          onChange={handelChangTran}
          options={translateLang().map(item => {
            return {
              value: item.code,
              label: item.label,
            }
          })}
        />
        <div className="pos-texta">
          <TextArea
            value={chVal}
            rows={8}
            placeholder="请输入你要翻译的文本"
            onChange={val => setChVal(val.target.value)}
            style={{ width: 500 }}
          />
          <TextArea value={tranVal} rows={8} style={{ width: 500 }} />
        </div>
        <div className="post-btn">
          <Button
            disabled={!chVal}
            type="primary"
            onClick={() => handelTranslate()}>
            翻译
          </Button>
          <Button disabled={!tranVal} onClick={() => handelCopyVal()}>
            复制翻译内容
          </Button>
          <Button onClick={() => handelClearForm()}>重置</Button>
        </div>
      </div>
    </div>
  )
}

export default Index
